<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- background-clip	指定对象的背景图像向外裁剪的区域。	3
background-origin	S设置或检索对象的背景图像计算background-position时的参考原点(位置)。	3 -->

    <div class="box"></div>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: lightblue;

        /* background-clip: border-box; */
        /* background-clip: padding-box; */
        /* background-clip: content-box; */



        /* 默认从border算 */

        background-image: linear-gradient(orange, blue);
        background-repeat: no-repeat;

        /* background-size: 50px 50px; */
        background-size: 100% 200%;

        /* 默认背景图 从padding 算 */
        /* background-origin: content-box; */
        /* 背景图 从 内容 算 */
        /* background-origin: border-box; */
        /* background-origin: padding-box; */


        padding: 20px;
        border: 20px dashed red;
      }
    </style>
  </body>
</html>
